<template>
  <div class="app-container">
    <el-container>
      <el-aside width="220px" style="background-color: white;padding: 2px;margin-bottom: 0;">
        <!--分部分项数据-->
        <div style="box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);">
          <div class="check-type">分部分项</div>
          <div class="aside-tree-container">
            <el-scrollbar class="aside-scrollbar">
              <el-tree
                ref="tree"
                :data="checkTypeList"
                :props="defaultProps"
                node-key="fid"
                highlight-current
                :expand-on-click-node="false"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </div>
        </div>
      </el-aside>
      <el-container style="margin-left: 20px">
        <el-header height="41px" style="padding: 0">
          <el-form ref="queryForm" :model="queryParams1" :inline="true" label-width="68px">
            <el-form-item size="mini" label="" prop="fnameL2">
              <el-input
                v-model="queryParams1.fnameL2"
                placeholder="请输入工序名称"
                clearable
                prefix-icon="el-icon-search"
                style="width: 240px"
                @input="handleQuery"
              />
            </el-form-item>
            <el-form-item size="mini">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main style="padding: 0; margin-bottom: 20px">
          <el-table
            ref="processTableRef"
            v-loading="loading"
            highlight-current-row
            size="small"
            :data="processList"
            height="calc(100vh - 474px)"
            @row-click="processRowClick"
          >
            <el-table-column
              label="序号"
              align="center"
              prop="cfseq"
              width="80"
            />
            <el-table-column
              label="工序名称"
              align="center"
              min-width="120"
              prop="fnameL2"
              show-overflow-tooltip
            />
            <el-table-column
              label="验收对象"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.cfunittype | selectEnumLabel(unitTypeEnum) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="cfcheckpercent1"
              min-width="70"
              label="工程师抽查比例（%）"
            />
            <el-table-column
              align="center"
              prop="cfcheckpercent2"
              min-width="65"
              label="监理抽查比例（%）"
            />
            <el-table-column
              align="center"
              prop="cfcheckpercent3"
              min-width="70"
              label="项目总抽查比例（%）"
            />
            <el-table-column
              align="center"
              prop="cfcheckpercent4"
              min-width="80"
              label="项目经理抽查比例（%）"
            />
            <el-table-column label="专业类型" align="center" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.cfspecialtypeid | specialType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="修改人" align="center" prop="updaterName" min-width="40" show-overflow-tooltip />
            <el-table-column label="最后修改时间" align="center" prop="createTime" min-width="70">
              <template slot-scope="scope">
                <span>{{ scope.row.flastupdatetime | dateFilter('yyyy-mm-dd hh:mm:ss') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click.stop="handleUpdate(scope.row)"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click.stop="handleDelete(scope.row)"
                >删除
                </el-button>
                <el-dropdown size="mini" @command="handleDropdownCommand($event, scope.row)">
                  <span class="more-dropdown">
                    <i class="el-icon-more" />
                    更多
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="attachment" class="more-dropdown-item" icon="el-icon-plus">附件</el-dropdown-item>
                    <el-dropdown-item command="customForm" class="more-dropdown-item" icon="el-icon-circle-plus">自定义表单</el-dropdown-item>
                    <el-dropdown-item command="precondition" class="more-dropdown-item" icon="el-icon-circle-plus-outline">前置条件</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="300px" style="padding: 0">
          <el-table
            highlight-current-row
            size="small"
            :data="checkList"
            height="300px"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              header-align="center"
              label="验收要点"
              prop="cfcheckcontent"
            />
            <el-table-column
              label="是否强制要求"
              align="center"
              width="160"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.cfiskey"
                  :active-value="1"
                  :inactive-value="0"
                  disabled
                  @change="handleStatusChange(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-footer>
      </el-container>
    </el-container>
    <div class="row-def" />

    <!-- 修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="序号" prop="cfseq">
              <el-input-number
                v-model="form.cfseq"
                style="width: 100%"
                placeholder="请输入"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="分部分项"
              prop="cfchecktypeid"
            >
              <el-select
                v-model="form.cfchecktypeid"
                placeholder="请选择"
                class="form-select"
                :disabled="form.fid && form.fid.length > 0"
                @change="selectCheckType(id)"
              >
                <el-option
                  v-for="type in checkTypeList"
                  :key="type.fid"
                  :label="type.fnameL2"
                  :value="type.fid"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="工序名称"
              prop="fnameL2"
            >
              <el-input
                v-model="form.fnameL2"
                placeholder="请输入工序名称"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收对象" prop="cfunittype">
              <el-select
                v-model="form.cfunittype"
                placeholder="请选择"
                class="form-select"
              >
                <el-option v-for="item in unitTypeEnum" :key="item.label" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="工程师抽查比例"
              prop="cfcheckpercent1"
            >
              <el-input
                v-model.number="form.cfcheckpercent1"
                placeholder="请输入"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="监理抽查比例"
              prop="cfcheckpercent2"
            >
              <el-input
                v-model.number="form.cfcheckpercent2"
                placeholder="请输入"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="项目总抽查比例"
              prop="cfcheckpercent3"
            >
              <el-input
                v-model.number="form.cfcheckpercent3"
                placeholder="请输入"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目经理抽查比例"
              prop="cfcheckpercent4"
            >
              <el-input
                v-model.number="form.cfcheckpercent4"
                placeholder="请输入"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="专业类别">
              <el-select
                v-model="form.cfspecialtypeid"
                placeholder="请选择"
                class="form-select"
              >
                <el-option
                  v-for="type in specialTypes"
                  :key="type.fid"
                  :label="type.fnameL2"
                  :value="type.fid"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他信息" prop="cfisproperty">
              <el-checkbox v-model="form.isreqattch" :true-label="1" :false-label="0">是否上传附件</el-checkbox>
              <el-checkbox v-model="form.isreqremark" :true-label="1" :false-label="0">是否必填备注</el-checkbox>
              <el-checkbox v-model="form.includeunderfloor" :true-label="1" :false-label="0">是否包含地下楼层</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right;margin-bottom: 10px;">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addCheck">新增</el-button>
      </div>
      <el-table
        highlight-current-row
        size="small"
        :data="form.checkList"
        height="300px"
      >
        <el-table-column>
          <template slot="header">
            <div style="text-align: center">验收要点</div>
          </template>
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
            >
              <div class="check-edit-content">{{ scope.row.cfcheckcontent }}</div>
              <div slot="reference" class="ellipsis">{{ scope.row.cfcheckcontent }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="是否强制要求"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.cfiskey"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="editCheck(scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteCheck(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          :loading="subLoading"
          @click="submitForm"
        >确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <el-dialog
        width="30%"
        :title="checkPoint.title"
        :visible.sync="checkPoint.innerVisible"
        append-to-body
      >
        <el-form label-width="120px" :model="checkPoint.form">
          <el-form-item label="是否强制要求">
            <el-switch
              v-model="checkPoint.form.cfiskey"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="验收要点" required>
            <el-input v-model="checkPoint.form.cfcheckcontent" :autosize="{ minRows: 2, maxRows: 6 }" :maxlength="250" type="textarea" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="checkPoint.isAdd ? addCheckSubmit() : editCheckSubmit()"
          >确 定
          </el-button>
          <el-button @click="addCheckCancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <!--附件管理-->
    <el-dialog
      title="附件管理"
      :close-on-click-modal="false"
      :visible.sync="fileManage.open"
      width="600px"
      append-to-body
      :show-close="!fileManage.loading"
      @close="fileDialogClose"
    >
      <div v-loading="fileManage.loading" style="height: 500px;overflow: auto;">
        <el-upload
          ref="upload"
          class="plan-upload-btn"
          :before-upload="beforeUpload"
          :data="fileManage.extraData"
          name="file"
          :multiple="true"
          accept=".png, .jpg, .jpeg"
          :on-success="handleUploadSuccess"
          list-type="picture-card"
          :headers="fileManage.headers"
          :file-list="fileManage.showFileList"
          :action="fileManage.uploadUrl"
          :before-remove="handleBeforeRemove"
          :on-remove="fileRemove"
          :on-preview="handlePictureCardPreview"
        >
          <i class="el-icon-plus" />
        </el-upload>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="fileManage.openPreview" top="5vh">
      <img width="100%" style="height: 80vh;" :src="fileManage.previewUrl" alt="">
    </el-dialog>

    <!-- 自定义表单 -->
    <el-dialog
      title="自定义表单"
      :close-on-click-modal="false"
      :visible.sync="customForm.visible"
      :show-close="false"
    >
      <CustomForm :base-data="customForm" />
    </el-dialog>
    <process-precondition
      :visible.sync="preconditionVisible"
      :relate-id="currentRow.fid"
      :process-tree="processTree"
    />
  </div>
</template>

<script>
import {
  addCheckTable,
  delCheckTable,
  delFile,
  listCheckTable,
  treeCheckTable,
  listCheckTableEntry,
  listCustomForm,
  listFile,
  updateCheckTable
} from '@/api/qualityManage/checkTable'
import { listCheckType, listSpecialType } from '@/api/qualityManage/checkType'
import { getEnum } from '@/api/common'
import { getToken } from '@/utils/auth'
import CustomForm from './components/CustomForm'
import ProcessPrecondition from './components/ProcessPrecondition'

let specialTypes = []
let checkTypeList = []
export default {
  name: 'CheckTable',
  filters: {
    specialType(id) {
      for (let i = 0; i < specialTypes.length; i++) {
        if (specialTypes[i].fid === id) {
          return specialTypes[i].fnameL2
        }
      }
      return id
    },
    checkType(id) {
      for (let i = 0; i < checkTypeList.length; i++) {
        if (checkTypeList[i].fid === id) {
          return checkTypeList[i].fnameL2
        }
      }
      return id
    }
  },
  components: {
    CustomForm,
    ProcessPrecondition
  },
  data() {
    var validate = (rule, value, callback) => {
      if (value > 100 || value < 0) {
        callback(new Error('取值范围为：0~100'))
      } else {
        callback()
      }
    }
    return {
      // 遮罩层
      loading: false,
      // 工序表格数据
      processList: [],
      originalList: [],
      // 弹出层标题
      title: '',
      // 部门树选项
      // 是否显示弹出层
      open: false,

      // 表单参数
      form: {
        cfseq: '',
        cfchecktypeid: '',
        fnameL2: '',
        cfcheckpercent1: '',
        cfcheckpercent2: '',
        cfcheckpercent3: '',
        cfcheckpercent4: '',
        cfspecialtypeid: '',
        cfunittype: 1,
        checkList: [],
        isreqattch: 0,
        isreqremark: 0,
        includeunderfloor: 0
      },
      defaultProps: {
        children: 'children',
        label: 'fnameL2'
      },
      queryParams1: {
        fnameL2: ''
      },
      // 查询参数
      queryParams: {
        cfchecktypeid: null
      },
      checkList: [],
      // 表单校验
      rules: {
        cfchecktypeid: [
          { required: true, message: '请选择分部分项', trigger: 'change' }
        ],
        fnameL2: [
          { required: true, message: '工序名称不能为空', trigger: 'blur' }
        ],
        cfseq: [
          { required: true, message: '序号不能为空', trigger: 'blur' }
        ],
        cfcheckpercent1: [
          { required: true, message: '请输入工程师抽查比例', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { validator: validate, trigger: 'blur' }
        ],
        cfcheckpercent2: [
          { required: true, message: '请输入监理抽查比例', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { validator: validate, trigger: 'blur' }
        ],
        cfcheckpercent3: [
          { required: true, message: '请输入项目总抽查比例', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { validator: validate, trigger: 'blur' }
        ],
        cfcheckpercent4: [
          { required: true, message: '请输入项目经理抽查比例', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { validator: validate, trigger: 'blur' }
        ],
        cfunittype: [
          { required: true, message: '请选择验收对象', trigger: 'change' }
        ]
      },
      specialTypes: [],
      checkTypeList: [],
      currentCheckType: {}, // 当前分部分项
      checkPoint: {
        title: '',
        innerVisible: false,
        isAdd: true,
        form: {
          cfcheckcontent: '',
          cfiskey: 0
        }
      },
      fileManage: {
        loading: false,
        open: false,
        uploadUrl: process.env.VUE_APP_BASE_API + '/gcxt/checktable/upload',
        extraData: { fid: '' },
        showFileList: [],
        headers: { Authorization: 'Bearer ' + getToken() },
        openPreview: false,
        previewUrl: false
      },
      /* 验收对象 枚举 */
      unitTypeEnum: [],
      formCheckTableList: [],
      subLoading: false,
      /* 自定义表单 */
      customForm: {
        /* 自定义表单窗口控制 */
        visible: false,
        /* 自定义表单参数 */
        fieldData: [],
        /* 工序ID */
        checktable: {}
      },
      // 前置工序
      preconditionVisible: false,
      processTree: [],
      currentRow: {}
    }
  },
  created() {
    this.getCheckList()
    this.getSpecialList()
    this.getList()
    this.getCheckTableTree()
    getEnum('unitType').then(response => {
      this.unitTypeEnum = response.data.unitType
    })
  },
  methods: {
    /* 附件管理*/
    handleFile(row) {
      this.setCurrentRow(row)
      this.fileManage.open = true
      this.fileManage.extraData.fid = row.fid
      listFile(row.fid).then(response => {
        response.data.forEach(id => {
          this.fileManage.showFileList.push(
            { url: process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + id, fid: id }
          )
        })
      })
    },
    /**
     * 设置当前工序高亮
     */
    setCurrentRow(row) {
      this.currentRow = row
      this.$refs.processTableRef.setCurrentRow(row)
      this.getListEntry(row.fid)
    },
    /* 上传之前过滤 */
    beforeUpload(file) {
      const file_type = file.type
      const isLt2M = file.size / 1024 / 1024 < 2

      const accept_type = ['image/jpeg', 'image/png', 'image/jpg']
      const accept = accept_type.includes(file_type)
      if (!accept) {
        this.msgError('上传图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.msgError('上传图片大小不能超过 2MB!')
        return false
      }
      return accept && isLt2M
    },
    // 预览
    handlePictureCardPreview(file) {
      this.fileManage.previewUrl = file.url
      this.fileManage.openPreview = true
    },
    /**
     * 删除照片前置处理
     * @param file
     * @param fileList
     * @return {Promise<MessageBoxData>}
     */
    handleBeforeRemove(file, fileList) {
      if (file.status === 'ready') return true

      return this.$confirm('此操作将永久删除附件, 是否继续?', '删除附件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    // 图片删除
    fileRemove(file, fileList) {
      if (file.status === 'ready') return

      this.fileManage.loading = true
      delFile(file.fid).then(response => {
        this.$message.success('附件删除成功。')
      }).catch(() => {
        fileList.push(file)
      }).finally(_ => {
        this.fileManage.loading = false
      })
    },
    /* 上传成功*/
    handleUploadSuccess(response, file, fileList) {
      if (response.code !== 200) {
        if (response.code === 401) {
          this.$confirm('登录状态已过期，请重新登录', '系统提示', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            showClose: false,
            closeOnClickModal: false,
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('LogOut').then(() => {
              location.href = '/index'
            })
          })
        } else {
          // 上传文件失败 则抛出错误信息
          this.msgError('上传文件失败 ' + response.msg)
        }
        for (let i = 0; i < fileList.length; i++) {
          if (file.name === fileList[i].name) {
            fileList.splice(i, 1)
          }
        }
        return
      }
      file.fid = response.data
    },
    fileDialogClose() {
      this.fileManage.showFileList = []
    },
    /** 查询专业类别列表 */
    getSpecialList() {
      listSpecialType({}).then(response => {
        this.specialTypes = response.data
        specialTypes = response.data
        // this.getList()
      })
    },
    /** 查询分部分项列表 */
    getCheckList() {
      listCheckType({}).then(response => {
        this.checkTypeList = response.data
        checkTypeList = response.data
      })
    },
    /**
     * 获取工序树
     */
    getCheckTableTree() {
      this.processTree = []
      treeCheckTable().then(res => {
        if (res.code === 200) {
          this.processTree = res.data || []
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams1.fnameL2 = ''
      this.queryParams.cfchecktypeid = ''
      this.reset()
      this.$refs.tree.setCurrentKey(null)
      this.getList()
    },
    /** 查询工序列表 */
    getList() {
      this.loading = true
      listCheckTable(this.queryParams).then(
        (response) => {
          this.processList = response.data
          this.originalList = [...response.data]
          this.getListEntry(response.data[0].fid)
          this.$refs.processTableRef.setCurrentRow(this.processList[0])
          this.loading = false
          this.handleQuery(this.queryParams1.fnameL2)
        }
      ).catch(() => {
        this.loading = false
      })
    },
    selectCheckType(id) {
      listCheckTable({
        cfchecktypeid: id
      }).then(
        (response) => {
          this.formCheckTableList = response.data
        })
    },
    /** 查询工序要点列表 */
    getListEntry(fid) {
      listCheckTableEntry({ fparentid: fid }).then(
        (response) => {
          this.checkList = response.data
        }
      ).catch(() => {
      })
    },
    // 选中工序行
    processRowClick(row, column, event) {
      // this.checkList = row.points
      this.getListEntry(row.fid)
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.cfchecktypeid = data.fid
      this.getList()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form.checkList = []
      this.resetForm('form')
    },

    handleQuery(val) {
      this.processList = this.originalList.filter(item => item.fnameL2 && item.fnameL2.indexOf(val) !== -1)
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.form = {
        cfseq: '',
        cfchecktypeid: this.queryParams.cfchecktypeid,
        fnameL2: '',
        cfcheckpercent1: '',
        cfcheckpercent2: '',
        cfcheckpercent3: '',
        cfcheckpercent4: '',
        cfspecialtypeid: '',
        cfunittype: 1,
        checkList: [],
        isreqattch: 0,
        isreqremark: 0,
        includeunderfloor: 0
      }
      this.open = true
      this.title = '新增工序'
    },
    addProcessNodeClick(data) {
      this.currentCheckType = data // 当前分部分项
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.processTableRef.setCurrentRow(row)
      this.reset()
      this.open = true
      this.title = '修改工序'
      this.form = JSON.parse(JSON.stringify(row))
      listCheckTableEntry({ fparentid: row.fid }).then(
        (response) => {
          this.$set(this.form, 'checkList', response.data)
        }
      )
      this.selectCheckType(row.cfchecktypeid)
    },
    // 表单要点编辑开始
    addCheck() {
      this.checkPoint.innerVisible = true
      this.checkPoint.title = '新增'
      this.checkPoint.isAdd = true
      this.checkPoint.form.cfcheckcontent = ''
      this.checkPoint.form.cfiskey = 0
    },
    addCheckSubmit() {
      if (!this.checkPoint.form.cfcheckcontent) {
        this.$message.warning('验收要点不能为空')
        return
      }
      this.form.checkList.push({ ...this.checkPoint.form })
      this.addCheckCancel()
    },
    addCheckCancel() {
      this.checkPoint.form.cfcheckcontent = ''
      this.checkPoint.form.cfiskey = 0
      this.checkPoint.innerVisible = false
    },
    editCheck(row) {
      this.checkPoint.innerVisible = true
      this.checkPoint.title = '编辑'
      this.checkPoint.isAdd = false
      this.checkPoint.currentCheck = row
      this.checkPoint.form.cfcheckcontent = row.cfcheckcontent
      this.checkPoint.form.cfiskey = row.cfiskey
    },
    editCheckSubmit() {
      if (!this.checkPoint.form.cfcheckcontent) {
        this.$message.warning('验收要点不能为空')
        return
      }
      this.checkPoint.currentCheck.cfcheckcontent = this.checkPoint.form.cfcheckcontent
      this.checkPoint.currentCheck.cfiskey = this.checkPoint.form.cfiskey
      this.addCheckCancel()
    },
    deleteCheck(row) {
      this.$confirm('此操作将删除该要点, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i = 0; i < this.form.checkList.length; i++) {
          if (this.form.checkList[i].cfiskey === row.cfiskey && this.form.checkList[i].cfcheckcontent === row.cfcheckcontent) {
            this.form.checkList.splice(i, 1)
            return
          }
        }
      })
    },
    // 表单要点编辑结束
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.entryList = [...this.form.checkList]
          if (this.form.entryList.length < 1) {
            this.$message.warning('至少有一条验收要点')
            return
          }
          if (this.form.fid !== undefined) {
            for (let i = 0; i < this.formCheckTableList.length; i++) {
              if (this.formCheckTableList[i].cfseq === this.form.cfseq && this.form.fid !== this.formCheckTableList[i].fid) {
                this.$message.warning('序号已存在，不能重复')
                return
              }
            }
            this.subLoading = true
            updateCheckTable(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.getList()
                this.getCheckTableTree()
              }
            }).finally(() => {
              this.open = false
              this.subLoading = false
            })
          } else {
            for (let i = 0; i < this.formCheckTableList.length; i++) {
              if (this.formCheckTableList[i].cfseq === this.form.cfseq) {
                this.$message.warning('序号已存在，不能重复')
                return
              }
            }
            this.subLoading = true
            addCheckTable(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
                this.getCheckTableTree()
              }
            }).finally(() => {
              this.subLoading = false
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        `是否要删除工序：${row.fnameL2} 的数据项?`,
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delCheckTable(row.fid)
        })
        .then(() => {
          this.getList()
          this.getCheckTableTree()
          this.msgSuccess('删除成功')
        })
        .catch(function() {
        })
    },
    /* 打开自定义表单 */
    handleCustomForm(row) {
      this.setCurrentRow(row)
      const self = this
      listCustomForm(row.fid).then(response => {
        if (response.code === 200) {
          const data = response.data
          for (var i in data) {
            if (data[i].options) {
              data[i].options = JSON.parse(data[i].options)
            }
          }
          self.customForm.fieldData = data
          self.customForm.checktable = row
          self.customForm.visible = true
        }
      }).catch()
    },
    /**
     * 处理配置前置工序
     * @param row
     */
    handlePrecondition(row) {
      this.setCurrentRow(row)
      this.preconditionVisible = true
    },
    /**
     *  处理下拉菜单指令
     * @param command 指令
     * @param data 数据
     */
    handleDropdownCommand(command, data) {
      switch (command) {
        case 'attachment' :
          this.handleFile(data)
          break
        case 'customForm':
          this.handleCustomForm(data)
          break
        case 'precondition' :
          this.handlePrecondition(data)
          break
        default: break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .aside-scrollbar {
    height: calc(100vh - 156px);
  }
  .ellipsis {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .check-content {
    max-width: 50vw;
    font-size: 12px;
    color: #606266;
  }
  .check-type {
    font-size: 14px;
    color: #606266;
    padding: 3px 10px;
    border-bottom: 1px solid #dcdfe6;
    background-color: #f8f8f9;
    font-weight: bold;
  }
  .check-edit-content {
    max-width: 600px;
    font-size: 12px;
    color: #606266;
  }
  .form-select {
    width: 260px;
  }
  .aside-tree-container {
    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .more-dropdown {
    cursor: pointer;
    color: #409EFF;
    margin-left: 10px;
    font-size: 12px;
  }
  /deep/ .more-dropdown-item {
    color: #409EFF;
    font-size: 12px;
  }
</style>
